<template>
  <div ref="headRef" style="height: 100px;background-color: white;display: flex;" >
    <div style="margin-left: 8%;margin-bottom: auto;margin-top: auto">
      <a href="">
        <img src="../../assets/img/logo/logo1.png" height="70" width="70" alt="">
      </a>
    </div>
    <div style="margin-left: 8%;margin-bottom: auto;margin-top: auto;border-radius: 100px">
      <el-input
          style="height: 40px;font-size: 16px;width: 390px;"
          v-model="searchInfo"
          placeholder="搜索"
          clearable
          class="w-50 m-2"
      >
        <template #append>
          <el-button @click="handlerChange" :icon="Search" />
        </template>
      </el-input>
    </div>
    <div style="margin-bottom: auto;margin-top: auto;margin-left: 26%;display: flex;">
      <div v-show="ifShow" style="font-size: 23px;height: max-content;margin-top: auto;margin-bottom: auto">
        hi, {{ username }}
      </div>
      <el-button @click="myClick" style="height: 40px;width: 85px;margin-left: 20px" type="success"
                 v-text="ifShow === false ? '登录' :'退出'" round>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import store from "../../store/index.js";
import axios from "../../axios/index.js";
import {ElMessage} from "element-plus";
import {onMounted, ref, watch} from "vue";
import { useRoute, useRouter} from "vue-router";
import { useElementVisibility } from '@vueuse/core'

const route = useRoute();
const router = useRouter();

const headRef = ref(null)
const headRefVisible = useElementVisibility(headRef)

watch(headRefVisible,()=>{
    //console.log("head是否出现: "+headRefVisible.value);
    store.commit("SET_HEADVISIBLE", headRefVisible.value)
},{
    //非惰性
    immediate: true,
    //深度监视
    deep: true
})

let searchInfo = ref("")

let timer;
const debounce = (fn, wait)=>{
  if (timer !== null) {
    clearTimeout(timer)
  }
  timer = setTimeout(fn, wait);
}

const handlerChange = ()=>{
  //console.log(searchInfo.value)
  //console.log(route.path);
  //if(route.path !== "/search") {
  //  router.push({ path: '/search', query: { query: searchInfo.value } })
  //}
  router.push({ path: '/search', query: { query: searchInfo.value } })
}

watch(searchInfo,()=>{
  //debounce(handlerChange, 2000);
  router.push("/")
},{
  //非惰性
  immediate: true,
  //深度监视
  deep: true
})




let username = ref('')
let ifShow = ref(false)

const getUserInfo = ()=>{
  //console.log("onMount");
  if (store.getters.getToken !== null && store.getters.getToken !== '') {
    axios.get("/user/info").then((res)=>{
      store.commit("SET_USERINFO", res.data.data);
      username.value = res.data.data.username;
      ifShow.value = !ifShow.value;
    }).catch(error => {
        store.commit("REMOVE_INFO");
        router.push('/login');
    })
  }
}

onMounted(()=>{
  getUserInfo();
  console.log("head"+ route.query.query);
  if (route.query.query === null || route.query.query === '' || route.query.query === undefined) {
    router.push("/")
  }else {
    if (searchInfo.value !== route.query.query) {
      searchInfo.value = route.query.query
    }
  }
})

const myClick = ()=>{
  if (ifShow.value) {
    store.commit("REMOVE_INFO");
    ifShow.value = !ifShow.value;
    ElMessage({
      message: '账户已退出',
      type: 'success',
    })
  }else {
    router.push('/login')
  }
}

</script>

<style scoped>
.el-input{
  --el-input-border-radius: 30px;
}
</style>
